<template>
<div>

	<myheader  />

	<h1>课程提交页面</h1>

<<<<<<< HEAD

=======
	<Reply :data="mydata"  />
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336


		<van-cell-group>

<<<<<<< HEAD
		<div v-show='show'>
		<Reply :data="mydata" />
				
		<van-field label="课程标题" v-model="title" />

		<van-field label="课程描述" v-model="desc" rows="5" type="textarea" />
		具体详细参数:
		<div v-for="(value,key,index) in params">	
			<van-field :label="value" v-model="info[key]" />
		</div>

		<van-field v-model="price" label='价格' /> 
=======

		<van-field label="课程标题" v-model="title" />

		<van-field label="课程描述" v-model="desc" rows="5" type="textarea" />
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

       状态:
            <van-radio-group v-model="state" direction="horizontal">
                <van-radio :name='1'>上架</van-radio>
                <van-radio :name='0'>下架</van-radio>
            </van-radio-group>
			</div>

<<<<<<< HEAD
		<van-button color="gray" @click="addcourse()">保存课程</van-button>


		<van-uploader  v-show="cid"  :after-read="afterRead" />
=======

	
		<van-field  v-for="(value,key,index) in params" :label="value" :key="key" v-model="info[key]" />
			

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

		<span v-show="cid" v-for="i,j in videos">

<<<<<<< HEAD
			<video width="300" height="200" :src="i" controls="controls" autoplay="autoplay"  muted >

			</video>
		</span>
		<div v-show="is_show">
			<van-button @click="put_course">修改</van-button>
		</div>

	</van-cell-group>
=======
		<van-button color="gray" @click="addcourse()">保存课程</van-button>


		<van-uploader  v-show="cid"  :after-read="afterRead" />


		<span v-show="cid" v-for="item,index in videos">

		<video  width="300" height="200" :src="item" controls="controls" autoplay="autoplay"  muted >

		</video>

		</span>

	</van-cell-group>

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336


</div>
</template>

</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';
import Reply from './Reply.vue';
import bus from './bus.js';


export default{

	//声明组件
	components:{

		'myheader':myheader,
		'Reply':Reply,
		
	},
	//构造方法
	created() {  

		//监听
		bus.$on('msg',target => {


			console.log(target);

			this.fid = target;
<<<<<<< HEAD
			if (this.cid == 0){
				//点选后获取分类id
				this.get_cate(this.fid)
			}else{
				this.$toast.fail('您已经保存过课程,无法再次选择分类');
				return false;
=======

			if(this.cid === 0){

				//点选后获取分类id
				this.get_cate(this.fid);

			}else{

				this.$toast.fail("您已经保存过课程，无法再次选择分类");
				return false;

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
			}



<<<<<<< HEAD
=======

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		});


}, 
	//声明变量
	data(){

		return {

			//数据
			mydata:{},
			//课程分类id
			fid:localStorage.getItem("fid"),
			title:"",
			desc:"",
			cid:0,
			videos:[],
			videosrc:"",
<<<<<<< HEAD
			price:'',
			state:1,
			uid:localStorage.getItem('id'),
			show:true,
			is_show:false,
			//课程参数列表
			params:{},
			//字典容器,动态生成容器
			info:{},
		
=======
			//课程参数列表
			params:{},
			//字典容器，动态生成容器
			info:{}



>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		}


	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				value = value.slice(0,3);

				return value + "********";
<<<<<<< HEAD


=======


>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
			}

	},
	//初始化方法
	mounted(){

		this.get_data();


		
	},
	//声明方法
	methods:{
		put:function(value,key){
		const result = this.params.map(item => ({key:item.value}))
		console.log(result)
		},
		

		//上传视频
		afterRead:function(file){
<<<<<<< HEAD

=======


			//声明表单
				let data = new FormData();

				data.append("file",file.file);
				data.append("id",localStorage.getItem("id"));
				data.append("cid",this.cid);
				data.append("type",1);

				//创建文件上传实例
				const myaxios = this.axios.create({withCredentials:false});

				myaxios({

					method:"post",
					url:"http://localhost:5000/upload/",
					data:data

				}).then(result => {

					console.log(result);

					//将视频地址赋值
					this.videosrc = "http://localhost:5000/static/upload/"+localStorage.getItem("id")+"/"+result.data.filename;
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

			//声明表单
				let data = new FormData();

<<<<<<< HEAD
				data.append("file",file.file);
				data.append("id",localStorage.getItem("id"));
				data.append("cid",this.cid);
				data.append("type",1);

				//创建文件上传实例
				const myaxios = this.axios.create({withCredentials:false});

				myaxios({

					method:"post",
					url:"http://localhost:5000/upload/",
					data:data
=======
					//累加填充
					this.videos.push(this.videosrc);


				})



		},

		getmsg:function(data){

			console.log(data);

			this.fid = data;

		},

		//添加课程
		addcourse:function(){

			var lists = [];

			//遍历取值
			for(var key in this.info){

					lists.push({'key':key,'value':this.info[key],'label':this.params[key]});

			}

			console.log(lists);

			//序列化操作
			var lists_str = JSON.stringify(lists);

			console.log(lists_str);

			//return false;


			var data_post = {fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("id")};

			//判断是否有特需参数
			if(lists.length > 0){

				var data_post = {fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("id"),"params":lists_str};

			}


			//发送请求
			this.axios.post(
				'http://localhost:5000/addcourse/',
				this.qs.stringify(data_post)).then((result) =>{

					console.log(result);

					if(result.data.code==200){

						this.$toast.success('课程添加成功');

						this.cid = result.data.cid;

			

					}else{
						this.$toast.fail(result.data.msg);
					}

			});

		},

		//获取课程分类参数
		get_cate:function(fid){


			//发送请求
			this.axios.get(
				'http://localhost:5000/getcate/',{params:{'fid':fid}}).then((result) =>{

					console.log(result);

					//获取参数
					var myparams = result.data.params;

					if(myparams === ""){
						myparams = null;
					}

					//解析
					myparams = JSON.parse(myparams);

					console.log(myparams);

					this.params = myparams;

					//动态生成data对应表单变量

					for(var key in this.params){

							console.log(key);

							//动态声明
							this.$set(this.info,key,'');

					}

					console.log(this.info);

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

				}).then(result => {

					console.log(result);
					if(result.data.code == 403){
						this.$toast.success(result.data.meg)
						return false;
					}

					//将视频地址赋值
					this.videosrc = "http://localhost:5000/static/upload/"+localStorage.getItem("id")+"/"+result.data.filename;
					//累加填充
					this.videos.push(this.videosrc);
				})
		},

		getmsg:function(data){

			console.log(data);

			this.fid = data;


		},
<<<<<<< HEAD
		//获取课程分类参数
		get_cate:function(fid){
			this.axios.get(this.localhost+'getcate/',{params:{'fid':fid}})
			.then(res=>{
				console.log(res);
				//获取参数
				var myparams = res.data.params;
				if(myparams === ''){
					myparams = null;
				}
				//解析
				myparams = JSON.parse(myparams);

				console.log(myparams);
				this.params = myparams;

				//动态生成data对应表单变量
				for (var key in this.params){
					console.log(key);
					//动态声明
					this.$set(this.info,key,'');
				}
				console.log(this.info);
			})
		},
		//添加课程
		addcourse:function(){
			var lists = [];

			//遍历取值
			for (var key in this.info){
				// console.log(key);
				// console.log(this.info[key]);
				// console.log(this.params[key]);
				lists.push({'key':key,'value':this.info[key],'label':this.params[key]});
			}
			console.log(lists);

			//序列化操作
			var lists_str = JSON.stringify(lists);
			console.log(lists_str);
			// return false;
			var data_post = {uid:this.uid,fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("id"),price:this.price,state:this.state};
			//判断是否有特需参数
			if (lists.length > 0){
				data_post = {uid:this.uid,fid:this.fid,title:this.title,desc:this.desc,id:localStorage.getItem("id"),price:this.price,state:this.state,params:lists_str};
			}

			//发送请求
			this.axios.post(
				this.localhost +'addcourse/',
				this.qs.stringify(data_post)).then((res) =>{

					console.log(res);

					if(res.data.code==200){

						this.$toast.success('课程添加成功');

						this.cid = res.data.cid;
						this.titone = res.data.title
						this.fid = res.data.cid
						this.show = false
						this.is_show = true

					}else{
						this.$toast.fail(res.data.meg);
					}
					
			});

		},
		//跳转修改页面
		put_course(){
			this.$router.push('put_course/')
		},
		//获取数据
		get_data:function(){
=======
		//获取数据
		get_data:function(){


			//发送请求
			this.axios.get(
				'http://localhost:5000/catelist/').then((result) =>{
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336

					console.log(result);

<<<<<<< HEAD
			//发送请求
			this.axios.get(
				this.localhost+'catelist/').then((result) =>{

					console.log(result);

					// 声明根节点
					var mytree = {'id':0,name:""};

					mytree['children'] = result.data;

					this.mydata = mytree;

					console.log(this.mydata);


			});


=======
					// 声明根节点
					var mytree = {'id':0,name:""};

					mytree['children'] = result.data;

					this.mydata = mytree;

					console.log(this.mydata);


			});


>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
		}
		


	}


}
	


</script>


<style>

ul {

	padding-left:10rem;
	list-style:none;

}

</style>